@use 'sass:math';

$container-max-width: 1320px;
$min-screen-size: 320px;

$brand-primary: #3b76c3;
$brand-primary-light: #02afef;
$brand-primary-dark: #2e3b69;

@function px-to-rem($fontAsPx) {
  @return math.div($fontAsPx, 16) * 1rem;
}

@function strip-unit($value) {
  @return math.div($value, ($value * 0 + 1));
}

// using fluid will scale a pixel value based on the screen size, with a lower and upper bound.
// it's brilliant for responsive design.
@function fluid($min-vw, $max-vw, $min-size, $max-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-size);
  $u4: unit($max-size);

  @if $u1 == $u2 and $u3 == $u4 {
    @return max(
      #{$min-size},
      min(
        #{$max-size},
        calc(
          #{$min-size} + #{strip-unit($max-size - $min-size)} *
            ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
        )
      )
    );
  }
}
